<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .box {
        width: 450px;

        margin: 50px;
        display: flex;
        flex-direction: column;

        position: relative;
      }

      .box > .show {
        width: 450px;
        height: 450px;
        border: 1px solid #333;
        position: relative;
      }

      .box > .show > .mask {
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.4;
        position: absolute;
        top: 0px;
        left: 0px;

        display: none;
      }

      .box > .list {
        width: 100%;
        flex: 1;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        box-sizing: border-box;
        padding: 20px;
      }

      .box > .list > p {
        width: 54px;
        height: 54px;
        border: 1px solid #333;
        margin-right: 10px;
      }

      .box > .list > p.active {
        border-color: red;
      }

      .box > .enlarge {
        width: 400px;
        height: 400px;

        position: absolute;
        top: 0;
        left: 101%;

        background: url(./imgs/1.big.jpg) no-repeat;
        background-size: 800px 800px;
        background-position: 0 0;

        display: none;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="show">
        <img src="./imgs/1.jpg" alt="" />
        <div class="mask"></div>
      </div>
      <div class="list">
        <p class="active">
          <img
            src="./imgs/1.small.jpg"
            showImg="./imgs/1.jpg"
            enlargeImg="./imgs/1.big.jpg"
            alt=""
          />
        </p>
        <p>
          <img
            src="./imgs/2.small.jpg"
            showImg="./imgs/2.jpg"
            enlargeImg="./imgs/2.big.jpg"
            alt=""
          />
        </p>
      </div>
      <div class="enlarge"></div>
    </div>
    <script>
      /*
        分析需求：1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
                 2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
                 3、放大图也要按照左边比例来移动
                 4、鼠标移到小图上可以切换图片
         */
      /*
         研究对象：放大镜对象；
          属性和方法：
                  属性：外层容器；
                      （属性：show  、 mask 、enlargeEle 、....）
                  方法：移入移除方法、 移动move方法 、切换图片....

      */
      class Enlarge {
        constructor(Ele) {
          this.boxEle = Ele;
          this.show = Ele.querySelector(".show");
          this.mask = Ele.querySelector(".mask");
          this.enlarge = Ele.querySelector(".enlarge");
          this.pEle = Ele.querySelectorAll(".list p");
          this.img = Ele.querySelector(".show img");
          this.enterOrLeave();
          this.moveFn();
        }
        enterOrLeave() {
          this.show.onmouseenter = () => {
            this.mask.style.display = "block";
            this.enlarge.style.display = "block";
          };
          this.show.onmouseleave = () => {
            this.mask.style.display = "none";
            this.enlarge.style.display = "none";
          };
        }
        moveFn() {
          var that = this;
          this.show.onmousemove = function (e) {
            var x =
              e.clientX - that.boxEle.offsetLeft - that.mask.offsetWidth / 2;
            var y =
              e.clientY - that.boxEle.offsetTop - that.mask.offsetHeight / 2;
            if (x < 0) {
              x = 0;
            }
            if (x > this.offsetWidth - that.mask.offsetWidth) {
              x = this.offsetWidth - that.mask.offsetWidth;
            }
            if (y < 0) {
              y = 0;
            }
            if (y > this.offsetHeight - that.mask.offsetHeight) {
              y = this.offsetHeight - that.mask.offsetHeight;
            }
            var sf = getComputedStyle(that.enlarge, null)["background-size"];
            var arr = sf.split(" ");
            var w = parseInt(arr[0]);
            var h = parseInt(arr[1]);
            var xx = (that.mask.offsetLeft / this.offsetWidth) * w;
            var yy = (that.mask.offsetTop / this.offsetHeight) * h;
            that.enlarge.style.backgroundPosition = `-${xx}px -${yy}px`;
            that.mask.style.left = x + "px";
            that.mask.style.top = y + "px";
          };
        }
        swtichPic() {
          this.pEle.forEach((item, key) => {
            item.onclick = () => {
              this.pEle.forEach((item, k) => {
                if (k == key) {
                  item.classList.add("active");
                } else {
                  item.classList.remove("active");
                }
              });
              // 替换上面的图像；
              this.img.src = `./imgs/${key + 1}.jpg`;
              // 切换右边的大图；
              this.enlarge.style.backgroundImage = `url(./imgs/${
                key + 1
              }.big.jpg)`;
            };
          });
        }
      }

      var boxEle = document.querySelector(".box");
      var obj = new Enlarge(boxEle);
      obj.swtichPic();
      //特有属性外部调用，共同属性类里调用
      // 获取show 的元素
      //   var show = document.querySelector(".show");
      //   // 获取遮罩层
      //   var mask = document.querySelector(".mask");
      //   // 获取放大区域
      //   var enlarge = document.querySelector(".enlarge");
      //   // 获取box元素
      //   var boxEle = document.querySelector(".box");
      //   show.onmouseenter = function () {
      //     mask.style.display = "block";
      //     enlarge.style.display = "block";
      //   };
      //   show.onmouseleave = function () {
      //     mask.style.display = "none";
      //     enlarge.style.display = "none";
      //   };
      //   // 遮罩层跟随鼠标移动；
      //   show.onmousemove = function (e) {
      //     var x = e.clientX - boxEle.offsetLeft - mask.offsetWidth / 2;
      //     var y = e.clientY - boxEle.offsetTop - mask.offsetHeight / 2;
      //     if (x < 0) {
      //       x = 0;
      //     }
      //     if (x > this.offsetWidth - mask.offsetWidth) {
      //       x = this.offsetWidth - mask.offsetWidth;
      //     }
      //     if (y < 0) {
      //       y = 0;
      //     }
      //     if (y > this.offsetHeight - mask.offsetHeight) {
      //       y = this.offsetHeight - mask.offsetHeight;
      //     }
      //     var sf = getComputedStyle(enlarge, null)["background-size"];
      //     var arr = sf.split(" ");
      //     var w = parseInt(arr[0]);
      //     var h = parseInt(arr[1]);
      //     var xx = (mask.offsetLeft / this.offsetWidth) * w;
      //     var yy = (mask.offsetTop / this.offsetHeight) * h;
      //     enlarge.style.backgroundPosition = `-${xx}px -${yy}px`;
      //     mask.style.left = x + "px";
      //     mask.style.top = y + "px";
      //     // 获取enlarge的背景图的宽和高；
      //   };
      // 点击小图切换 对应的图像
      //   var pEle = document.querySelectorAll(".list p");
      //   //   console.log(pEle);
      //   var img = document.querySelector(".show img");
      // pEle.forEach((item, key) => {
      //   item.onclick = function () {
      //     pEle.forEach((item, k) => {
      //       if (k == key) {
      //         item.classList.add("active");
      //       } else {
      //         item.classList.remove("active");
      //       }
      //     });
      //     // 替换上面的图像；
      //     img.src = `./imgs/${key + 1}.jpg`;
      //     // 切换右边的大图；
      //     enlarge.style.backgroundImage = `url(./imgs/${key + 1}.big.jpg)`;
      //   };
      // });
    </script>
  </body>
</html>
